<template>
  <div class="permission-container">
    <div class="app-container">
      <PageTools>
        <template #right>
          <el-button size="small" type="primary" @click="dialogVisibal('1','0')">添加权限</el-button>
        </template>
      </PageTools>
      <el-table border :data="list" row-key="id">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" align="center" />
        <el-table-column label="描述" prop="description" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" @click="dialogVisibal('2',row.id)">添加</el-button>
            <el-button type="text" @click="edit(row)">编辑</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <PermissionDialog ref="permissionDialogRef" :visible="isShow" :type="type" :pid="pid" @close="close" @update="fetchPermission" />
  </div>
</template>

<script>
import PermissionDialog from './component/permission-dialog.vue'
import findSon from '@/utils/findSon'
import { getPermissionList, delPermission } from '@/api'
import PageTools from '@/components/PageTools/index.vue'
export default {
  components: { PageTools, PermissionDialog },
  data() {
    return {
      list: [],
      isShow: false,
      type: '',
      pid: ''
    }
  },
  created() {
    this.fetchPermission()
  },
  methods: {
    // 获取列表数据
    async fetchPermission() {
      const { data } = await getPermissionList()
      // console.log(data)
      this.list = findSon(data, '0')
    },
    // 点击关闭
    close() {
      this.isShow = false
    },
    // 点击添加
    dialogVisibal(type, pid) {
      this.isShow = true
      this.type = type
      this.pid = pid
    },
    // 点击编辑按钮
    edit(row) {
      this.isShow = true
      this.$refs.permissionDialogRef.getDetail(row.id)
      // 点击编辑按钮需要获取子组件中的详情
      // 可以采用父组件中调用子组件方法方式实现详情的获取
      // 因为dom的更新时异步的
      // 父传子是同步的
    },
    del(id) {
      this.$confirm('确定要删除权限吗', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPermission(id)
        this.$message.success('删除成功')
        this.fetchPermission()
      }).catch(() => {
        this.$message.info('取消成功')
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.el-table {
  margin-top: 20px;
}
</style>
